<%--
  Created by IntelliJ IDEA.
  User: 陈海彬
  Date: 2023/9/25
  Time: 19:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>统计信息</title>
    <link rel="stylesheet" href="../../static/css/element-ui.css">
    <script src="../../static/js/vue.js"></script>
    <script src="../../static/js/axios.min.js"></script>
    <script src="../../static/js/element_index.js"></script>
    <script src="../../static/js/echarts.min.js"></script>
</head>
<body>
<div id="app">
    <el-collapse v-model="foldingPanelList" style="width: 98%">
        <el-collapse-item name="1">
            <template slot="title">
                <p style="font-size: 18px;">搜索</p>
            </template>
            <div style="text-align: center;height: 50px;line-height: 50px;">
                <el-form :inline="true" :model="formTime">
                    <el-form-item label="日期范围">
                        <el-date-picker
                                value-format="yyyy-MM-dd HH:mm:ss"
                                v-model="formTime.time"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="timeSearch">立即查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="formTime.time = []">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-collapse-item>
        <el-collapse-item name="2">
            <template slot="title">
                <p style="font-size: 18px;">营销额预览排行</p>
            </template>
            <el-row>
                <el-col :span="12">
                    <div id="pie1" style="width: 98%;height: 320px;"></div>
                    <div style="text-align: center;font-weight: bold;font-size: 16px">
                        <span :style="{color: (salesStatisticsMap.costAmountCount-salesStatisticsMap.businessCount>0?'green':'red')}">
                            {{salesStatisticsMap.costAmountCount-salesStatisticsMap.businessCount>0?'亏损':'赚取'}}
                        </span>
                        {{salesStatisticsMap.costAmountCount-salesStatisticsMap.businessCount>0?
                        salesStatisticsMap.costAmountCount-salesStatisticsMap.businessCount:
                        salesStatisticsMap.businessCount-salesStatisticsMap.costAmountCount}}
                    </div>
                </el-col>
                <el-col :span="12">
                    <div id="pie2"
                         style="width: 98%;height: 320px;"></div>
                    <div>
                    </div>
                </el-col>
            </el-row>
        </el-collapse-item>
        <el-collapse-item name="3">
            <template slot="title">
                <p style="font-size: 18px;">商品销量预览排行</p>
            </template>
            <div id="pie3" style="width: 98%;height:350px;"></div>
        </el-collapse-item>

    </el-collapse>
</div>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            foldingPanelList: ['1', '2', '3'],//默认激活选项
            salesStatisticsMap: {},//本店进销统计
            allStatisticsList: [],//所有分店营销额数据
            allGoodsMap: {},//各商品销量统计
            formTime: {
                time: [],//时间
            },
        },
        created() {
        },
        mounted() {
            this.getStatisticsInfo();
        },
        methods: {
            /*获取所需的数据*/
            getStatisticsInfo() {
                axios.post('/statistics/getStatisticsInfo', {
                    "begin": this.formTime.time[0],
                    "end": this.formTime.time[1]
                }).then(res => {
                    this.salesStatisticsMap = res.data.data.salesStatisticsMap;
                    this.allStatisticsList = res.data.data.allStatisticsList;
                    this.allGoodsMap = res.data.data.allGoodsMap;
                    this.initPie1();
                    this.initPie2();
                    this.initPie3();
                })
            },
            /*本店进销统计图*/
            initPie1() {
                let myChart = echarts.init(document.querySelector('#pie1'));
                let pieData = [];
                let option = {};
                pieData.push({name: '营销额', value: this.salesStatisticsMap.businessCount})
                pieData.push({name: '成本额', value: this.salesStatisticsMap.costAmountCount})
                option = {
                    series: [
                        {
                            name: 'money',
                            type: 'pie',
                            data: pieData,
                            label: {
                                show: true,
                            },
                            radius: '50%',//饼图的半径
                        }
                    ],
                    toolbox: {
                        feature: {
                            saveAsImage: {},//导出图片
                            dataView: {},//数据视图属性
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function (arg) {
                            return arg.seriesName + "</br>" + arg.name + ": " + arg.value + " (" + arg.percent + "%)";
                        }
                    },
                    legend: {
                        show: true,
                        left: 10,
                        orient: 'vertical',
                    },
                    title: {
                        text: '本店进销统计',
                        subtext: '实时更新',
                        x: 'center',
                        y: 'top'
                    }
                };
                // 5.进行配置
                myChart.setOption(option)
                window.onresize = myChart.resize;
            },
            /*各分店营销额统计*/
            initPie2() {
                let myChart = echarts.init(document.querySelector('#pie2'));
                let option = {
                    series: [
                        {
                            name: '营销额',
                            type: 'pie',
                            data: this.allStatisticsList,
                            label: {//饼图文字的显示
                                show: true,//显示文字
                            },
                            center: ['50%', '50%'],
                            radius: '50%',//饼图的半径
                        }
                    ],
                    toolbox: {
                        feature: {
                            saveAsImage: {},//导出图片
                            dataView: {},//数据视图属性
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function (arg) {
                            return arg.seriesName + "</br>" + arg.name + ": " + arg.value + " (" + arg.percent + "%)";
                        },
                        className: 'bgWhite'
                    },
                    legend: {
                        show: true,
                        left: 10,
                        orient: 'vertical',
                    },
                    title: {
                        text: '各分店营销额统计',
                        subtext: '实时更新',
                        x: 'center',
                        y: 'top'
                    }
                };
                // 5.进行配置
                myChart.setOption(option)
                window.onresize = myChart.resize;
            },
            /*各商品销量统计*/
            initPie3() {
                let myChart = echarts.init(document.querySelector('#pie3'));
                let option = {
                    title: {
                        text: "各商品销量统计"
                    },
                    xAxis: {
                        type: "category",
                        data: this.allGoodsMap.goodsNameList,
                        axisLabel: {
                            rotate: 30,  //让文本倾斜
                            interval: 0,
                            show: true,
                        },
                    },
                    yAxis: {
                        type: "value",
                    },
                    series: [
                        {
                            name: "销量",
                            type: "bar",
                            data: this.allGoodsMap.goodsCountList,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'top', //在上方显示
                                        textStyle: { //数值样式
                                            color: 'black',
                                            fontSize: 16
                                        }
                                    }
                                },
                                color: function (params) {
                                    let colorarrays = ["#c1232b", "#b5c334", "#fccf10", "#9F2E61", "#4D670C", "#BF675F", "#1F814A", "#357F88", "#673509", "#310937", "#1B9637", "#F7393C"];
                                    return colorarrays[params.dataIndex];
                                },
                            }
                        }
                    ],
                    tooltip: {
                        trigger: 'axis',
                        backgroundColor: "#ffffff",
                        color: "black",
                        borderWidth: "1", //边框宽度设置1
                        borderColor: "#c1232b", //设置边框颜色
                        textStyle: {
                            color: "black"
                        },
                        formatter: function (arg) {
                            return arg[0].seriesName +
                                "</br><div style='width: 10px;height: 10px;margin: 0 4px;background: " + arg[0].color + " ;border-radius: 50%;display: inline-block'> </div>" + arg[0].name
                                + "&nbsp;&nbsp;<span style='font-weight: bold;'>" + arg[0].data + "</span>"
                        }
                    },
                    barWidth: '40%', //柱状图的宽度
                    toolbox: {
                        feature: {
                            saveAsImage: {},
                            dataView: {},
                            magicType: {type: ['line', 'bar']},
                        }
                    }

                }
                myChart.setOption(option);
                window.onresize = myChart.resize;
            },
            /*时间模糊查询*/
            timeSearch() {
                axios.post('/statistics/getStatisticsInfo', {
                    "begin": this.formTime.time[0],
                    "end": this.formTime.time[1]
                }).then(res => {
                    this.salesStatisticsMap = res.data.data.salesStatisticsMap;
                    this.allStatisticsList = res.data.data.allStatisticsList;
                    this.allGoodsMap = res.data.data.allGoodsMap;
                    this.initPie1();
                    this.initPie2();
                    this.initPie3();
                })
            }
        }
    })
</script>
<style>
    .el-collapse-item {
        flex: 1 0 90% !important;
        order: 1 !important;
    }

    .el-collapse-item__header {
        flex: 1 0 auto !important;
        order: -1 !important;
    }

    .bgWhite {
        background: white;
        color: black;
    }
</style>
</body>
</html>
